/*
 * Copyright (c) 2013 by Gerrit Grunwald
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/************************************************************
* LED class                                                 *
************************************************************/
.led {
    -fx-skin     : "com.eru.scene.control.skin.LedSkin";
    -led-type    : round;   /* round, square, vertical, horizontal, triangle-up, triangle-right, triangle-down, triangle-left */
    -led-color   : red;
    -frame-color : linear-gradient(from 14% 14% to 84% 84%,
                                   rgba(20, 20, 20, 0.64706) 0%,
                                   rgba(20, 20, 20, 0.64706) 15%,
                                   rgba(41, 41, 41, 0.64706) 26%,
                                   rgba(41, 41, 41, 0.64573) 26%,
                                   rgba(200, 200, 200, 0.40631) 85%,
                                   rgba(200, 200, 200, 0.3451) 100%);
}


/************************************************************
* Square LED                                                *
************************************************************/
.led > .square-frame {
    -fx-background-color : -frame-color;
    -fx-background-radius: 5%;    
}
.led > .square {
    -fx-background-color : linear-gradient(from 0% 0% to 99% 99%,
                                           derive(-led-color, -80%) 0%,
                                           derive(-led-color, -87%) 49%,
                                           derive(-led-color, -80) 100%);
    -fx-background-radius: 5%;
}
.led:on > .square {
    -fx-background-color: linear-gradient(from 2% 2% to 96% 96%,
                                          derive(-led-color, -23%) 0%,
                                          derive(-led-color, -50%) 49%,
                                          -led-color 100%);
}
.led > .square-highlight {
    -fx-background-color : linear-gradient(from 0% 0% to 0% 23%,
                                           rgba(200, 200, 200, 0.8) 0%,
                                           transparent 100%);
    -fx-background-radius: 5%;    
}


/************************************************************
* Round LED                                                 *
************************************************************/
.led > .round-frame {
    -fx-background-color : -frame-color;
    -fx-background-radius: 1024;    
}
.led > .round {
    -fx-background-color : linear-gradient(from 15% 15% to 83% 83%,
                                           derive(-led-color, -80%) 0%,
                                           derive(-led-color, -87%) 49%,
                                           derive(-led-color, -80) 100%);
    -fx-background-radius: 1024;
}
.led:on > .round {
    -fx-background-color: linear-gradient(from 15% 15% to 83% 83%,
                                          derive(-led-color, -23%) 0%,
                                          derive(-led-color, -50%) 49%,
                                          -led-color 100%);
}
.led > .round-highlight {
    -fx-background-color: radial-gradient(center 15% 15%, radius 50%,
                                          rgba(200, 200, 200, 0.8) 0%,
                                          transparent 100%);
    -fx-background-radius: 1024;
}


/************************************************************
* Horizontal LED                                            *
************************************************************/
.led > .horizontal-frame {
    -fx-background-color : -frame-color;
    -fx-background-radius: 4%;    
}
.led > .horizontal {
    -fx-background-color : linear-gradient(from 0% 0% to 100% 100%,
                                           derive(-led-color, -80%) 0%,
                                           derive(-led-color, -87%) 49%,
                                           derive(-led-color, -80) 100%);
    -fx-background-radius: 4%;
}
.led:on > .horizontal {
    -fx-background-color: linear-gradient(from 0% 0% to 100% 100%,
                                          derive(-led-color, -23%) 0%,
                                          derive(-led-color, -50%) 49%,
                                          -led-color 100%);
}
.led > .horizontal-highlight {
    -fx-background-color : linear-gradient(from 50% 0% to 50% 75%,
                                           rgba(200, 200, 200, 0.8) 0%,
                                           transparent 100%);
    -fx-background-radius: 4%;
}


/************************************************************
* Vertical LED                                              *
************************************************************/
.led > .vertical-frame {
    -fx-background-color : -frame-color;
    -fx-background-radius: 4%;
}
.led > .vertical {
    -fx-background-color : linear-gradient(from 0% 0% to 0% 100%,
                                           derive(-led-color, -80%) 0%,
                                           derive(-led-color, -87%) 49%,
                                           derive(-led-color, -80) 100%);
    -fx-background-radius: 4%;
}
.led:on > .vertical {
    -fx-background-color: linear-gradient(from 0% 0% to 100% 100%,
                                          derive(-led-color, -23%) 0%,
                                          derive(-led-color, -50%) 49%,
                                          -led-color 100%);
}
.led > .vertical-highlight {
    -fx-background-color : linear-gradient(from 0% 0% to 0% 69%,
                                           rgba(200, 200, 200, 0.8) 0%,
                                           transparent 100%);
    -fx-background-radius: 4%;
}


/************************************************************
* LED designs                                               *
************************************************************/
.led-red {
    -led-color: #ca0814;
}
.led-green {
    -led-color: #2bca23;
}
.led-blue {
    -led-color: #033bff;
}
.led-yellow {
    -led-color: #fafa00;
}
.led-orange {
    -led-color: #fc5100;
}
.led-cyan {
    -led-color: #00ffff;
}
.led-magenta {
    -led-color: #ff00ff;
}
.led-purple {
    -led-color: #7900ff;
}
.led-gray {
    -led-color: #cccccc;
}
